<template>

<div class="common-layout">
    <el-container>
      <el-aside width="200px">

       
  <el-input
    v-model="filterText"
    style="width: 240px"
    placeholder="Filter keyword"
  />

  <el-tree
    ref="treeRef"
    style="max-width: 600px"
    class="filter-tree"
    :data="data"
    :props="defaultProps"
    default-expand-all
    :filter-node-method="filterNode"
  />
 

      </el-aside>
      <el-main>



        <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/">网格管理</a>
    </el-breadcrumb-item>
    <el-breadcrumb-item>物理网格管理</el-breadcrumb-item> 
  </el-breadcrumb>
 
<div style="height:100px; border:1px solid;padding:15px; margin-top:15px;">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
    <el-form-item label="网格名称">
      <el-input v-model="searchForm.GridName" placeholder="请输入网格名称" clearable />
    </el-form-item>
    <el-form-item label="就是用来看">
      <el-input v-model="searchForm.GridName" placeholder="请输入网格名称" clearable />
    </el-form-item>
  <br>
    <el-form-item>
      <el-button type="primary" @click="getData">搜索</el-button>
    </el-form-item>
  </el-form>
</div>
<div style="height:580px; border:1px solid;padding:15px; margin-top:15px;">
    <el-button type="success" @click="form.show=true">新增</el-button>
  
        <!-- {
      "id": 615872772489221,
      "areaId": 2,
      "gridNo": "hulan002",
      "gridName": "呼兰街道物理网格"
    }, -->

  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="id" label="编号" width="150" />
    <el-table-column prop="areaId" label="区域编号" width="120" />
    <el-table-column prop="gridNo" label="网格编号" width="120" />
    <el-table-column prop="gridName" label="网格名称" width="120" />
   
    <el-table-column fixed="right" label="操作" min-width="120">
      <template v-slot="scope">
        <el-button link type="primary" size="small" @click="Del(scope.row)">
          删除
        </el-button>
        <el-button link type="primary" @click="Edit(scode.row)" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="form.show" title="添加物理网格" width="800">

    <el-form :inline="false" :model="form" class="demo-form-inline">
    <el-form-item label="网格名称">
      <el-input v-model="form.GridName" placeholder="请输入网格名称" clearable />
    </el-form-item>
    <el-form-item label="网格区域">
      <el-input v-model="form.areaId" placeholder="请输入网格区域" clearable />
    </el-form-item>
  <br>
    <el-form-item>
      <el-button type="primary" @click="addPhysicalGrid">添加</el-button>
      <el-button type="success" @click="form.show=false">关闭</el-button>

    </el-form-item>
  </el-form>
  </el-dialog>

</div>

      </el-main>
    </el-container>
  </div>
 
 
 </template>



 <script lang='ts' setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import {   watch } from 'vue'
import { ElTree } from 'element-plus'

interface Tree {
  [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'label',
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

const data: Tree[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
 

const searchForm = reactive({
    GridName:''
})
 
const form = reactive({
    show:true,
"areaId": 0,
  "gridNo": "",
  "gridName": ""
})

const addPhysicalGrid=()=>{
    axios.post('https://localhost:7171/api/PhysicalGrid/CreatePhysicalGrid',form).then(res=>{

        if (res.data.code == 200) {
                ElMessage.success(res.data.msg);
                getData()
            }else{
                ElMessage.error( res.data.msg);
            }
    });

}

const tableData= ref([]);

const getData =()=>{ 
    axios.get('https://localhost:7077/api/PhysicalGrid/GetGridList',{params:searchForm}).then(res=>{

        
        tableData.value = res.data.data
        console.log( res.data.data)       
    })
}

const Edit=(row)=>{
    
    }

const Del=(row)=>{

    ElMessageBox.confirm('确认要删除该物理网格吗?', '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        row.loginName = sessionStorage.getItem('loginName')
        console.log(row)
        axios.put('https://localhost:7171/api/PhysicalGrid/DelPhysicalGrid', row).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg);
                getData()
            }else{

                ElMessage.error("操作失败!");
            }
        })

      
    })


}


onMounted(()=>{
    
    getData();
    console.log(tableData.value)
     

});
</script>